<template>
  <div class="_wz_cent_main _wzelectronicWaybillHome">

    <div style="height: 165px;margin-bottom: 10px;">
      <Row style="height: 100%" :gutter="10">
        <i-col span="12" style="height: 100%;">
          <Card dis-hover style="height: 100%;">
            <p slot="title">运单统计</p>
            <p slot="extra" style="color: #2d8cf0;">
              {{!!billStatistics.billCount?billStatistics.billCount.billAllCount:0}}
            </p>
            <Row :gutter="10" style="padding: 18px 0;">
              <i-col span="6" style="height: 100%;text-align: center;">
                <div style="font-size: 18px;color: #ed4014;line-height: 30px;">{{!!billStatistics.billCount?billStatistics.billCount.billUnallocatedCount:0}}</div>
                <div style="font-size: 12px;color: #ada2a2;line-height: 30px;height: 30px;">未分配数</div>
              </i-col>
              <i-col span="6" style="height: 100%;text-align: center;border-left: 1px solid #e8eaec;">
                <div style="font-size: 18px;color: #ff9900;line-height: 30px;">{{!!billStatistics.billCount?billStatistics.billCount.billAllocatedCount:0}}</div>
                <div style="font-size: 12px;color: #ada2a2;line-height: 30px;height: 30px;">已分配数</div>
              </i-col>
              <i-col span="6" style="height: 100%;text-align: center;border-left: 1px solid #e8eaec;">
                <div style="font-size: 18px;color: #75adf9;line-height: 30px;">{{!!billStatistics.billCount?billStatistics.billCount.billLoadingCount:0}}</div>
                <div style="font-size: 12px;color: #ada2a2;line-height: 30px;height: 30px;">装货数</div>
              </i-col>
              <i-col span="6" style="height: 100%;text-align: center;border-left: 1px solid #e8eaec;">
                <div style="font-size: 18px;color: #19be6b;line-height: 30px;">{{!!billStatistics.billCount?billStatistics.billCount.billCompleteCount:0}}</div>
                <div style="font-size: 12px;color: #ada2a2;line-height: 30px;height: 30px;">完成数</div>
              </i-col>
            </Row>
          </Card>
        </i-col>
        <i-col span="6" style="height: 100%;">
          <Card dis-hover style="height: 100%;">
            <p slot="title">收/托运方统计</p>
            <p slot="extra" style="color: #2d8cf0;">
              {{!!billStatistics.billBasicCustomerCount?billStatistics.billBasicCustomerCount.billBasicAllCount:'0'}}
            </p>
            <Row :gutter="10" style="padding: 18px 0;">
              <i-col span="12" style="height: 100%;text-align: center;">
                <div style="font-size: 18px;color: #ff9900;line-height: 30px;">{{!!billStatistics.billBasicCustomerCount?billStatistics.billBasicCustomerCount.billBasicShipperCount:0}}</div>
                <div style="font-size: 12px;color: #ada2a2;line-height: 30px;height: 30px;">托运方</div>
              </i-col>
              <i-col span="12" style="height: 100%;text-align: center;border-left: 1px solid #e8eaec;">
                <div style="font-size: 18px;color: #19be6b;line-height: 30px;">{{!!billStatistics.billBasicCustomerCount?billStatistics.billBasicCustomerCount.billBasicReceivingCount:0}}</div>
                <div style="font-size: 12px;color: #ada2a2;line-height: 30px;height: 30px;">收货方</div>
              </i-col>
            </Row>
          </Card>
        </i-col>
        <i-col span="6" style="height: 100%;">
          <Card dis-hover style="height: 100%;">
            <p slot="title">起运地、目的地统计</p>
            <p slot="extra" style="color: #2d8cf0;">
              {{!!billStatistics.billBasicPlaceCount?billStatistics.billBasicPlaceCount.billBasicAllCount:'0'}}
            </p>
            <Row :gutter="10" style="padding: 18px 0;">
              <i-col span="12" style="height: 100%;text-align: center;">
                <div style="font-size: 18px;color: #ff9900;line-height: 30px;">{{!!billStatistics.billBasicPlaceCount?billStatistics.billBasicPlaceCount.billBasicDischargeCount:0}}</div>
                <div style="font-size: 12px;color: #ada2a2;line-height: 30px;height: 30px;">目的地</div>
              </i-col>
              <i-col span="12" style="height: 100%;text-align: center;border-left: 1px solid #e8eaec;">
                <div style="font-size: 18px;color: #19be6b;line-height: 30px;">{{!!billStatistics.billBasicPlaceCount?billStatistics.billBasicPlaceCount.billBasicLoadingCount:0}}</div>
                <div style="font-size: 12px;color: #ada2a2;line-height: 30px;height: 30px;">起运地</div>
              </i-col>
            </Row>
          </Card>
        </i-col>
      </Row>
    </div>
    <div style="height: calc(100% - 175px);">
      <Row :gutter="10" style="height: 100%;">
        <i-col span="16" style="height: 100%;">
          <Row :gutter="10" style="height: calc((100% - 10px) / 2);margin-bottom: 10px;">
            <i-col span="12" style="height: 100%;">
              <Card dis-hover style="height: 100%;">
                <p slot="title">客户使用量</p>
                <div style="height: 100%;" ref="bingTuH">
                  <bingTu :topHeight="bingTuH" v-if="bingTuH != 0 && bingTuType2" :bingTuData="bingTuData2"></bingTu>
                </div>

              </Card>
            </i-col>
            <i-col span="12" style="height: 100%;">
              <Card dis-hover style="height: 100%;">
                <p slot="title">地点使用量</p>
                <div style="height: 100%;">
                  <bingTu :topHeight="bingTuH" v-if="bingTuH != 0 && bingTuType3" :bingTuData="bingTuData3"></bingTu>
                </div>
              </Card>
            </i-col>
          </Row>
          <Card dis-hover style="height: calc((100% - 10px) / 2);">
            <p slot="title">电子运单数量统计</p>
            <div style="height:100%;" ref="lineChart2Heght">
              <lineChart2 :bottomHeight="lineChart2Heght" v-if="lineChart2Heght != 0 && lineChart2Data.type" :lineChart2Data="lineChart2Data"></lineChart2>
            </div>

          </Card>
        </i-col>
        <i-col span="8" style="height: 100%;">
          <Card dis-hover style="height: 100%;">
            <p slot="title">电子运单未完成车辆</p>
            <div style="height: 100%;" id="_wz_vehicleMonitoring_allmap"></div>
          </Card>
        </i-col>
      </Row>
    </div>
    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>
<script>
import lineChart2 from "../../../components/Chart/lineChart/lineChart2";
import regionalDiscount from "../../../components/Chart/lineChart/regionalDiscount";
import bingTu from "../../../components/Chart/lineChart/bingTu";
export default {
  components: {
    regionalDiscount,
    lineChart2,//
    bingTu,
  },
  data() {
    return {

      BMapWz: [],//地图一屏展示使用

      spinShow:true,//本页加载
      billStatistics:{},


      bingTuH: 0,
      lineChart2Heght:0,

      bingTuType2: false,
      bingTuData2: {
        "id": "bingTuData2",
        "data": [],
        "unit": "",
        "style": {
          "padding": [20, 20, 50, 20]
        }
      },

      bingTuType3: false,
      bingTuData3: {
        "id": "bingTuData3",
        "data": [],
        "unit": "",
        "style": {
          "padding": [20, 20, 50, 20]
        }
      },
      lineChart2Data: {
        type: false,
        "id": "charId9",
        "data": [],
        "unit": "",
        "style": {
          "padding": [30, 20, 30, 60]
        }
      },

    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var that = this;

    that.$nextTick(function () {
      that.lineChart2Heght = that.$refs.lineChart2Heght.offsetHeight;
      that.bingTuH = that.$refs.bingTuH.offsetHeight;
      window.onresize = function () {
        that.lineChart2Heght = that.$refs.lineChart2Heght.offsetHeight;
        that.bingTuH = that.$refs.bingTuH.offsetHeight;
      };
    })


    that.map = new BMap.Map("_wz_vehicleMonitoring_allmap");    // 创建Map实例
    that.map.centerAndZoom(new BMap.Point(105.058886,36.028623), 4);  // 初始化地图,设置中心点坐标和地图级别
    //添加地图类型控件
    that.map.addControl(new BMap.MapTypeControl({
      mapTypes: [
        BMAP_NORMAL_MAP,
        BMAP_HYBRID_MAP
      ]
    }));
    that.map.setCurrentCity("邢台");          // 设置地图显示的城市 此项是必须设置的
    that.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    // 左上角，添加比例尺
    let top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});
    that.map.addControl(top_left_control);
    //左上角，添加默认缩放平移控件    billUnfinishedPosition
    let top_left_navigation = new BMap.NavigationControl();
    that.map.addControl(top_left_navigation);






    that.spinShow = true;
    that.axios.post(that.apiUrl.statisticsPcBillStatistics, {}).then(res => {
      that.spinShow = false;
      if (!!res) {
        that.billStatistics = res.data.data;



        //客户使用
        var data = [];
        for(var i =0;i<that.billStatistics.billBasicCustomerUseCount.length;i++){
          data.push({'item': that.billStatistics.billBasicCustomerUseCount[i].name, "percent": !!that.billStatistics.billBasicCustomerUseCount[i].value?that.billStatistics.billBasicCustomerUseCount[i].value:0})
        }
        that.bingTuData2.data = data;
        that.bingTuType2 = true;



        //地点
        var data = [];
        for(var i =0;i<that.billStatistics.billBasicPlaceUseCount.length;i++){
          data.push({'item': that.billStatistics.billBasicPlaceUseCount[i].name, "percent": !!that.billStatistics.billBasicPlaceUseCount[i].value?that.billStatistics.billBasicPlaceUseCount[i].value:0})
        }
        that.bingTuData3.data = data;
        that.bingTuType3 = true;

        //30天
        that.billStatistics.billMonth.forEach(function (k, i) {
          that.lineChart2Data.data.push({
            month: k.name,//
            city: '单位（次）',
            temperature: k.value
          })
        })
        that.lineChart2Data.type = true;
        that.waybillMonthStatistics = res.data.data;





        //电子运单
        that.billStatistics.billUnfinishedPosition.billRecordList.forEach(function (k, i) {
          if (!!k.vehiclePosition.lonX && k.vehiclePosition.lonX.length > 0 && k.vehiclePosition.lonX != null && !!k.vehiclePosition.latY && k.vehiclePosition.latY.length > 0 && k.vehiclePosition.latY != null) {
            let myIcon;
            // if(k.vehiclePosition.isOnline){//在线
              myIcon = new BMap.Icon("../../static/img/vehicleImg/b4.png", new BMap.Size(25, 25));
            // }else{//离线
            //   myIcon = new BMap.Icon("../../static/img/vehicleImg/b5.png", new BMap.Size(25, 25));
            // }

            let marker = new BMap.Marker(new BMap.Point(k.vehiclePosition.lonX, k.vehiclePosition.latY), {
              icon: myIcon,
              title: k.vehiclePosition.carPlateNo
            });  // 创建标注
            marker.setRotation(k.direction);
            that.map.addOverlay(marker);            //增加点



            var data = k.vehiclePosition;
            var html = '<div style=\'background:#FFFFFF;color:#000000;font-weight:normal;line-height: 25px;border-top:solid  1px #ccc\'>' +
              '<div>行驶速度：' + data.vec1 + ' / ' + data.vec2 + '</div>' +
              '<div>总里程数：' + data.vec3 + '公里</div>' +
              '<div>行驶状态： ' + ((data.state >> 0 & 1) ? '启动' : '熄火') +((data.state >> 1 & 1) ? ' - 定位' : ' - 未定位') +'</div>' +
              '<div>报警状态： ' + ((data.alarm >> 1 & 1) ? '超速报警' : "无超速") + ((data.alarm >> 2 & 1) ? '-疲劳报警' : " - 无疲劳") +'</div>'+
              '<div>定位时间：' + that.public.timeFormatting(new Date(data.dateTime), "yyyy-MM-dd hh:mm:ss") + '</div>'+
              '<div style="word-break:break-all;">' + data.location + '</div>'+
              '</div>';
            var point = new BMap.Point(k.vehiclePosition.lonX, k.vehiclePosition.latY);

            var opts = {
              title : data.carPlateNo , // 信息窗口标题
            }
            var infoWindow = new BMap.InfoWindow(html, opts);  // 创建信息窗口对象
            marker.addEventListener("click", function(){
              that.map.openInfoWindow(infoWindow, point); //开启信息窗口
            });


            //
            // var BaiMakerLabel = new BMap.Label(html, {offset: new BMap.Size(22, -3)});
            // BaiMakerLabel.setStyle({border: 'none', padding: '3px 5px', background: 'none'});
            // marker.setLabel(BaiMakerLabel);






            // that.map.centerAndZoom(new BMap.Point(data.lonX, data.latY), 8);  // 初始化地图,设置中心点坐标和地图级别
            // that.markers.push(marker);
            that.BMapWz.push(new BMap.Point(k.vehiclePosition.lonX, k.vehiclePosition.latY));//一屏显示用

            // //坐标自动展示所有的坐标  一平显示
            that.map.setViewport(that.BMapWz);
          }
        })




      }
    }).catch(err => {
      console.log("失败", err)
    })



  },
  methods: {//执行的方法

  },
  watch: {//监听
  },
  props: {//接收来自父组件的数据

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">

._wzelectronicWaybillHome {
  height: 843px !important;
  .ivu-card-body {
    padding: 8px !important;
    height: calc(100% - 51px);
  }

}
</style>
